<template>
	<view class="container">
		<!-- 登录页面标题 -->
		<view class="login_title">欢迎使用物业小程序</view>

		<!-- 输入手机号 -->
		<view class="mobile_div">
			<input class="et_mobile" placeholder="请输入手机号码" :value="phone" maxlength="16" type="number" @input="onInput" />
		</view>

		<!-- 分割线 -->
		<view class="divider"></view>

		<!-- 输入验证码 -->
		<view class="code_div">
			<input class="et_code" placeholder="请输入验证码" value="" maxlength="8" type="number" @input="onInputCode" />
			<view class="btn_code" @tap="onMsg">{{ sms_txt }}</view>
		</view>

		<!-- 分割线 -->
		<view class="divider"></view>

		<!-- 登录按钮 -->
		<view class="login_btn_div">
			<view class="login_btn" @tap="onLogin">登录</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	const util = require('../../../utils/util')
	import { postMsg, postLogin } from '../../../utils/http/api'
	var second = 60 // 验证码计时器
	var isCountDown = false
	export default {
		data() {
			return {
				// 存储手机号
				phone: '',
				// 存储验证码
				code: '',
				// 验证码按钮文字
				sms_txt: '获取验证码',
				isLogin: false,
				user: {}
			};
		},
		onLoad: function(options) {},
		methods: {
			// onInput 手机号输入监听
			onInput(e) {
				let phone = e.detail.value;
				this.setData({ phone: phone })
			},

			// 监听:手机号输入
			onInputCode(e) {
				let code = e.detail.value
				this.setData({ code: code })
			},

			// 点击获取验证码
			onMsg(e) {
				if (!this.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' })
					return
				}
				if (isCountDown) {
					uni.showToast({ title: second + 's后再获取', icon: 'none' })
					return
				}
				this.reqMsg()
			},

			// 点击登录
			onLogin(e) {
				if (util.isNull(this.phone)) {
					uni.showToast({ title: '请输入手机号', icon: 'none' })
					return
				}
				if (!this.code) {
					uni.showToast({ title: '请输入验证码', icon: 'none' })
					return
				}
				this.reqLogin()
			},

			// 请求登录
			async reqLogin() {
				uni.showLoading({ title: '登录中', mask: true })
				let { code, msg, data } = await postLogin({ mobile: this.phone, event: 'mobilelogin', captcha: this.code })
				if (code == '1') {
					uni.showToast({ title: msg, icon: 'none' })
					let token = data.userinfo.token
					let mobile = data.userinfo.mobile
					let id = data.userinfo.id
					uni.setStorageSync('token', token)
					uni.setStorageSync('mobile', mobile)
					uni.setStorageSync('id', id)
					app.globalData.gl.token = token // 为全局变量设置token

					try {
						let pages = getCurrentPages() // 获取当前页面pages里的所有信息。
						let prevPage = pages[pages.length - 2] // prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
						prevPage.setData({
							// 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
							isLogin: true,
							user: { name: '用户' + mobile, phone: mobile, id: id }
						})
						//上一个页面内执行setData操作，将我们想要的信息保存住。当我们返回去的时候，页面已经处理完毕。
						uni.navigateBack() // 关闭当前页面
					} catch (e) {
						uni.switchTab({ url: '/pages/sys/home/home' })
					}
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 请求验证码
			async reqMsg() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await postMsg({ mobile: this.phone, event: 'mobilelogin' })
				if (code == '1') {
					uni.showToast({ title: msg, icon: 'none' })
					this.sms_txt = second + 's';
					let timer = setInterval(() => {
						second--;
						if (second <= 0) {
							clearInterval(timer); // 取消计时器
							this.sms_txt = '获取验证码';
							this.setData({ sms_txt: '获取验证码' })
							second = 60;
							isCountDown = false;
						} else {
							this.sms_txt = second + 's';
							this.setData({ sms_txt: second + 's' })
						}
					}, 1000);
					isCountDown = true;
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.login_btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #25b785;
		font-size: 32rpx;
		text-align: center;
		color: white;
		border-radius: 40rpx;
	}

	/* 20250720样式 */
	.login_title {
		color: #21b683;
		font-size: 38rpx;
		margin: 36rpx 0 0 36rpx;
	}

	.mobile_div {
		display: flex;
		margin: 80rpx 0 0 36rpx;
	}

	.et_mobile {
		flex-grow: 1;
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}

	.code_div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 40rpx 36rpx 0 36rpx;
	}

	.et_code {
		flex-grow: 1;
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}

	.btn_code {
		color: #999;
		font-size: 24rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.divider {
		background-color: #e5e5e5;
		height: 1rpx;
		margin: 10rpx 36rpx 0 36rpx;
	}

	.login_btn_div {
		display: flex;
		margin: 100rpx 56rpx 0 56rpx;
	}
</style>